<template>
  <view>
    <!-- 提交订单-商品详情 -->
    <view class="item-gooddetails-box flex-x-sb">
     <image
        class="item-gooddetails-left"
        :src="good.goods_pic"
        mode="aspectFit"
      ></image>
      <view class="item-gooddetails-right">
        <!-- 商品名称 -->
        <view class="text-more-1 title">{{ good.goods_name }}</view>
        <!-- 商品sku属性 -->
        <view class="text-more-1">
          <text v-if="good.product_type == 1 && bookedInfo.length">
            {{ bookedInfo[0].value + "-" + bookedInfo[1].value }}
          </text>
          <text v-else-if="good.product_type == 2 && bookedInfo.length">
            {{ bookedInfo[0] }}({{ bookedInfo[1] }}){{
              bookedInfo[2] + " " + bookedInfo[3]
            }}
          </text>
          <template v-else>
            <text
              style="margin-right: 6px"
              v-for="(attr, attrIndex) in good.attr_list"
              :key="attrIndex"
            >
              {{ attr.attr_group_name }}:{{ attr.attr_name }}
            </text>
          </template>

          <view class="text-more-1 goods-seckill" v-if="good.delivery_rules">
            {{ good.delivery_rules.name }}：{{ good.delivery_rules.times }}
          </view>
        </view>

        <!-- 商品数量以及价格 -->
        <view>
          <view v-show="!isBooked">
            <template v-if="good.product_type == 4">
              <text style="font-size: 34rpx"
                >{{ good.integral_price }}积分{{
                  good.level_price && good.level_price > 0
                    ? `+${good.level_price}元`
                    : ""
                }}</text
              >
            </template>
            <template v-else>
              <text>￥</text><text>{{ good.level_price | integer }}</text>
              <text style="font-size: 20rpx">{{
                good.level_price | decimals
              }}</text>
            </template>
          </view>
          <view>×{{ good.num }}</view>
        </view>
        <view class="text-more-1 text-more-2" v-if="good.price_str">
          {{ good.price_str }}
        </view>
        <view> </view>
        <!--  -->
        <view
          class="integral"
          v-if="good.integral && showIntegral && good.integral.forehead"
        >
          积分抵扣{{ good.integral.forehead }}元
        </view>
		<view
		  class="integral balance"
		  v-if="good.balance  && showBalance && good.balance > 0"
		>
		  余额抵扣{{ good.balance }}元
		</view>
      </view>
    </view>
    <view class="cuxiao-box">
      <view
        class="flex-y-center flex-x-sb"
        v-for="item in good.verify_card_id"
        :key="item.id"
      >
        <text class="text-more-1" style="flex: 0.9; width: 0"
          >[{{ $t("admin.send") }}] {{ item.name }}</text
        >
        <text>x1</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    // 商品data
    good: {
      type: Object,
      default: () => {
        return {};
      },
    },
    // 是否预约商品
    isBooked: {
      type: Boolean,
      default: false,
    },
    showIntegral: {
      type: Boolean,
      default: false,
    },
	showBalance: {
	  type: Boolean,
	  default: false,
	},

    bookedInfo: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  filters: {
    integer(data) {
      let end = data.indexOf(".");
      if (end !== -1) {
        data = data.substr(0, end);
      }
      return data;
    },
    decimals(data) {
      let end = data.indexOf(".");
      data = data.substr(end, 3);
      if (end === -1) {
        data = "";
      }
      return data;
    },
  },
};
</script>

<style lang="scss" scoped>
.item-gooddetails-box {
  margin: 30rpx 0;

  .item-gooddetails-left {
    width: 180rpx;
    height: 180rpx;
    border-radius: 10rpx;
  }

  .item-gooddetails-right {
    flex: 1;
    margin-left: 24rpx;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    > view:nth-child(1) {
      font-size: 28rpx;
    }

    > view:nth-child(2) {
      font-size: 22rpx;
      color: #8c8c8c;
      margin: 4rpx 0;
    }

    > view:nth-child(3) {
      margin-bottom: 4rpx;
      display: flex;
      justify-content: space-between;

      view:first-child {
        font-size: 34rpx;
        font-weight: bold;
        color: #f2270c;

        text:nth-child(1) {
          font-size: 20rpx;
        }
      }

      view:last-child {
        font-size: 24rpx;
      }
    }

    > view:nth-child(4) {
      font-size: 18rpx;

      > view {
        padding: 0 5rpx;
        display: inline-block;
        font-size: 18rpx;
        color: #f22d14;
        border: 1rpx solid #ff978a;
        border-radius: 4rpx;
      }
    }

    .integral {
      font-size: 26rpx;
      font-family: PingFang SC;
      font-weight: 600;
      color: #f0250e;
      margin-top: 8rpx;
    }
  }

  .verify-right {
    flex: 1;
    width: 0;
    margin-left: 24rpx;
    > view:nth-child(1) {
      font-size: 28rpx;
    }
    > view:nth-child(2) {
      font-size: 22rpx;
      color: #8c8c8c;
      margin: 10rpx 0;
    }
    > view:nth-child(3) {
      > view:nth-child(1) {
        font-size: 34rpx;
        font-weight: 600;
      }
    }
  }
}

.scroll-box {
  > scroll-view {
    flex: 1;
    max-width: 580rpx;
    white-space: nowrap;
    image {
      margin: 0 10rpx;
    }
  }
}
.cuxiao-box {
  margin-bottom: 30rpx;
  color: #8c8c8c;
  font-size: 24rpx;
  line-height: 34rpx;
}

.goods-seckill {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 12rpx 0 4rpx;
  color: #ff5c26;
  font-size: 24rpx;
  overflow: hidden;
}

.text-more-1.title {
  margin-bottom: 2rpx;
}

.text-more-2 {
  font-weight: bold;
  color: #f2270c;
}
</style>
